<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Web-Redis</title>
    <script src="/static/js/js_lib/jquery.v3.3.1.min.js"></script>
    <script src="/static/js/config.js"></script>

    <script src="/static/js/layer/layer.js"></script>
</head>
<style>
    li{
        list-style:none; 
    }
    .init_form input {
        width: 120px;
        margin-top: 5px;
    }

    .init_form {
        text-align: center;
    }

    .init_form button {
        margin-top: 10px;
    }
    .set-form input{
        width: 160px;
    }
    .get-form input{
        width:120px;
    }
</style>

<body>

    <button onclick="init()">初始化连接</button>
    <button onclick="string()">String - tip</button>

    <br>
    <br>
    <a href="/redis/api/v1.0/">
        <button>API:http://127.0.0.1:22334/redis/api/v1.0/</button>
    </a>

    <br>
    <br>
    <a href="key/analysis-key.html"><button>按键分析</button></a><br>
    <a href="/redis/api/v1.0/show_code"><button>错误码</button></a>
    <br>

</body>


<script type="text/html" id="init_redis">
    <div class="init_form">
        主机&nbsp;:&nbsp;
        <input type="text" id="host" value="127.0.0.1" />
        <br> 端口&nbsp;:&nbsp;
        <input type="number" id="port" value="6666" min="0" max="65535"/>
        <br> 密码&nbsp;:&nbsp;
        <input type="text" id="pass" value="" />
        <br> D&nbsp;B&nbsp;&nbsp;:&nbsp;
        <input type="number" id="db" value="2" min="0"/>
        <br>
        <button onclick="initRedis()">初始化连接</button>
    </div>
</script>

<script type="text/html" id="set_key">
    <form id="set-form" class="set-form">
        <input type="text" id="key" required/> <->
        <input type="text" id="value" required/><br><br>
        <button>Set</button>
    </form>
</script>
<script type="text/html" id="get_key">
    <form id="get-form" class="get-form">
        <input type="text" id="get-key" required/>
        <button>Get</button> = 
        <span id="get-result" style="color:red;"></span>
    </form>
</script>
<script type="text/html" id="list_key">
    <form id="list-form" class="list-form">
        <input type="text" id="list-key" required/>
        <button>获取列表</button> 
    </form>
</script>

<script>
    function initRedis() {
        const data = {
            host: $("#host").val(),
            port: $("#port").val(),
            password: $("#pass").val(),
            db: $("#db").val()
        };
        handlePost('/init_redis', data, function (data) {
            if (data.code == '0') {
                layer.closeAll()
                layer.msg('连接成功')
            } else {
                layer.msg('连接失败')
            }
        }, function (data) {
            layer.msg('连接失败', JSON.stringify(data.reponseText))
        })
    }

    function init() {
        tip(['200px', '230px'], '初始化连接', $("#init_redis").html());
    }
    function string() {
        var set_content = $("#set_key").html()
        var get_content = $("#get_key").html()
        var list_content = $("#list_key").html()
        layer.tab({
            area: ['500px', '520px'],
            tab: [{
                title: 'set',
                content: set_content
            }, {
                title: 'get',
                content: get_content
            }, {
                title: 'all-keys',
                content: list_content
            }]
        });
        $("#set-form").submit(function (e) {
            e.preventDefault();
            set();
        });
        $("#get-form").submit(function (e) {
            e.preventDefault();
            get();
        });
    }

    function set() {
        var key = $("#key").val()
        var value = $("#value").val()
        handlePost('/key', {
            key: key,
            value: value
        }, function (data) {
            console.log(data)
        }, function (data) {
            console.log(data)
        })
    }
    function get() {
        var key = $("#get-key").val();
        handleGet('/key/' + key, function (data) {
            if (data.code == '404') {
                $("#get-result").text('没有该键')
            } else if (data.code == '405') {
                $("#get-result").text("该键不是String类型")
            } else {
                $("#get-result").text(data.data)
            }
        }, function (data) { })
    }
    handleGet('/show_code', function (code_details) {
        localStorage.setItem("errorCode", JSON.stringify(code_details));
    })
</script>

</html>